<template>
	<view class="container">
		<!-- 头部导航 -->
		<view class="header">
			<view class="header-left" @click="goBack" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">我创作的</view>
			<view class="header-right"></view>
		</view>

		<scroll-view scroll-y class="content">
			<view :style="{ height: contentTop + 'px' }"></view>
			<!-- 我创作的内容列表 -->
			<view class="creative-list">
				<view class="creative-group">
					<!-- 我创作的 -->
					<view v-if="myCreativeItems.length > 0">
						<view v-for="item in myCreativeItems" :key="item.id" class="creative-item"
							@click="goToDetail(item.id)">
							<view class="user-info">
								<view style="display: flex;">
									<view style="position: relative;">
										<image :src="item.avatar || '/static/default-avatar.png'" class="avatar"
											mode="aspectFill" />
										<image v-if="userInfo.identity != 2 & userInfo.work_level > 0"
											class="avatar-vip-icon"
											:src="'/static/base/user-center/level/'+ userInfo.levelImg">
										</image>
									</view>
									<view class="user-details">
										<text class="username">{{ item.nickname }}</text>
										<text v-if="userInfo.identity == 2" class="badge">设计师</text>
										<text v-if="userInfo.identity != 2 & item.work_level === 0"
											class="badge">{{levelName}}</text>
										<!-- <image v-if="userInfo.identity != 2 & item.work_level > 0" class="mvp-img"
											:src="'/static/base/user-center/level/' + userInfo.levelImg"> -->
									</view>
								</view>

								<view class="date-info">
									<text class="date">{{ formatDate(item.add_time) }}</text>
									<text v-if="item.audit_status === 0" class="status">审核中</text>
									<text v-if="item.audit_status === 2" class="status">审核通过</text>
									<text v-if="item.audit_status === 3" class="status">审核未通过</text>
								</view>

							</view>

							<view class="description">
								{{ item.content || item.title }}
							</view>

							<!-- 图片横向滚动区域 -->
							<scroll-view scroll-x class="image-scroll" :show-scrollbar="false"
								v-if="item.images && item.images.length">
								<view class="image-container">
									<view @tap.native.stop="previewImages(item.images)"
										v-for="(img, imgIndex) in item.images" :key="imgIndex" class="image-item">
										<image :src="img" class="image" mode="aspectFill" />
									</view>
								</view>
							</scroll-view>

							<view v-else>
								<view class="image-container">
									<view class="image-item">
										<image :src="imgHost + '/statics/images/no-thing.png'" class="image"
											mode="aspectFill"></image>
									</view>
								</view>
							</view>

							<view class="action-stats">
								<view class="participate-section" @click.stop="viewParticipants(item)">
									<view class="participant-avatars">
										<image v-for="(designer, idx) in (item.designerList || []).slice(0, 3)"
											:key="designer.designer_uid"
											:src="designer.avatar || '/static/default-avatar.png'"
											class="participant-avatar" mode="aspectFill" />
									</view>
									<text v-if="item.designerList && item.designerList.length>0"
										class="participate-text">参与了设计</text>
								</view>

								<view class="handle-btn">
									<view class="stat-item">
										<image
											:src="item.liked ? '/static/base/index/good-active.png' : '/static/base/index/good.png'"
											class="stat-icon" mode="aspectFit" />
										<text class="stat-text">{{ item.likeNum || 0 }}</text>
									</view>
									<view class="stat-item">
										<image src="/static/base/index/comment.png" class="stat-icon"
											mode="aspectFit" />
										<text class="stat-text">0</text>
									</view>
									<view class="stat-item">
										<image src="/static/base/index/transpond.png" class="stat-icon"
											mode="aspectFit" />
										<text class="stat-text">0</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="empty-tips">还没有发布作品哦~</view>
				</view>

				<!-- 热门推荐标题 -->
				<view class="section-title">- - - 热门推荐 - - -</view>

				<view class="creative-group">
					<!-- 热门推荐 -->
					<view v-for="item in hotRecommendItems" :key="item.id" class="creative-item"
						@click="goToDetail(item.id)">
						<view class="user-info">
							<view style="display: flex;">

								<view style="position: relative;">
									<image :src="item.avatar || '/static/default-avatar.png'" class="avatar"
										mode="aspectFill" />
									<image v-if="item.identity != 2 & item.work_level > 0" class="avatar-vip-icon"
										:src="'/static/base/user-center/level/' + item.levelImg">
								</view>

								<view class="user-details">
									<text class="username">{{ item.nickname }}</text>
									<text v-if="item.identity==2" class="identity-title">设计师</text>
									<text v-if="item.identity!=2 & item.work_level == 0">创作者</text>
									<!-- <image v-if="item.identity != 2 & item.work_level > 0" class="mvp-img"
										:src="'/static/base/user-center/level/' + item.levelImg"> -->
								</view>
							</view>
							<view class="date-info">
								<text class="date">{{ formatDate(item.add_time) }}</text>
							</view>
						</view>

						<view class="description">
							{{ item.content || item.title }}
						</view>

						<!-- 图片横向滚动区域 -->
						<scroll-view scroll-x class="image-scroll" :show-scrollbar="false"
							v-if="item.images && item.images.length">
							<view class="image-container">
								<view v-for="(img, imgIndex) in item.images" :key="imgIndex" class="image-item">
									<image :src="img" class="image" mode="aspectFill" />
								</view>
							</view>
						</scroll-view>
						<view v-else>
							<view class="image-container">
								<view class="image-item">
									<image :src="imgHost + '/statics/images/no-thing.png'" class="image"
										mode="aspectFill"></image>
								</view>
							</view>
						</view>

						<view class="action-stats">
							<view class="participate-section" @click.stop="viewParticipants(item)">
								<view class="participant-avatars">
									<image v-for="(designer, idx) in (item.designerList || []).slice(0, 3)"
										:key="designer.designer_uid"
										:src="designer.avatar || '/static/default-avatar.png'"
										class="participant-avatar" mode="aspectFill" />
								</view>
								<text v-if="item.designerList && item.designerList.length>0"
									class="participate-text">参与了设计</text>
							</view>

							<view class="handle-btn">
								<view class="stat-item">
									<image
										:src="item.liked ? '/static/base/index/good-active.png' : '/static/base/index/good.png'"
										class="stat-icon" mode="aspectFit" />
									<text class="stat-text">{{ item.likeNum || 0 }}</text>
								</view>
								<view class="stat-item">
									<image src="/static/base/index/comment.png" class="stat-icon" mode="aspectFit" />
									<text class="stat-text">{{ item.replyNum || 0 }}</text>
								</view>
								<view class="stat-item">
									<image src="/static/base/index/transpond.png" class="stat-icon" mode="aspectFit" />
									<text class="stat-text">{{ item.shareNum || 0 }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 60rpx;"></view>
		</scroll-view>

		<!-- 参与者详情模态框 -->
		<view v-if="showParticipantsModal" class="modal-mask" @click="closeModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text>参与设计</text>
					<view class="close-btn" @click="closeModal">×</view>
				</view>
				<view class="modal-body">
					<view v-for="designer in currentParticipants" :key="designer.designer_uid" class="modal-participant"
						@click="goToDesigner(designer.designer_uid)">
						<image :src="designer.avatar || '/static/default-avatar.png'" class="modal-avatar"
							mode="aspectFill" />
						<text class="modal-nickname">{{ designer.nickname }}</text>
					</view>
					<view v-if="currentParticipants.length === 0" class="empty-modal">暂无参与者</view>
				</view>
			</view>
		</view>

		<TableBar :current="3" />
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import Cache from '@/utils/cache';
	import {
		USER_INFO,
		UID
	} from '@/config/cache';

	import {
		getWorkList
	} from '@/api/base/index.js'

	import {
		workLikeAdd,
		workLikeDel
	} from '@/api/base/index.js'
	import {
		getMyWorkList
	} from '@/api/base/designer.js'

	import {
		getBaseUserInfo
	} from '@/api/base/user-center';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	export default {
		components: {
			TableBar
		},
		computed: {
			levelName() {
				const map = ['普通创作者', '青铜创作者', '白银创作者', '黄金创作者', '钻石创作者', '王者创作者'];
				return map[this.userInfo.work_level];
			}
		},
		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				userInfo: {},
				safeTop: 0,
				contentTop: 0,
				myCreativeItems: [],
				hotRecommendItems: [],
				showParticipantsModal: false,
				currentParticipants: []
			}
		},
		onLoad() {
			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop;
			this.contentTop = barTop + 44;

			this.fetchMyWorks();
			this.fetchHotRecommend();
			this.getUserInfo();
		},
		methods: {
			levelImg(work_level) {
				const map = ['', '1.png', '2.png', '3.png', '4.png', '5.png'];
				return map[work_level];
			},
			getUserInfo() {
				getBaseUserInfo().then(res => {
					const cacheUserInfo = JSON.parse(Cache.get(USER_INFO));
					if (res.status === 200 && res.data) {
						this.userInfo = {
							...this.userInfo,
							...res.data,
							phoneNumber: res.data.phone,
							follow_count: res.data.follow_count || 0,
							fans_count: res.data.fans_count || 0,
							comment_count: res.data.comment_count || 0,
							work_like_count: res.data.work_like_count || 0,
							share_count: res.data.share_count || 0,
							income: res.data.income || '0.00',
							levelImg: this.levelImg(res.data.work_level)
						};
						if (this.invite && this.invite.invite_uid) {
							console.error('1 秒后 跳转设计师邀约界面')
							console.error(this.invite)
							let _this = this
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/sub_base/designer-apply/index?invite_uid=' + _this
										.invite.invite_uid +
										'&invite_Name=' + _this.invite.invite_Name +
										'&phoneNumber=' + _this.userInfo.phoneNumber
								})
								console.error('已 跳转设计师邀约界面 清理缓存数据')
								delete _this.invite
							}, 1000)
						}
					}
				}).catch(err => {
					console.log('获取用户信息失败', err);
				});
			},
			previewImages(imgs) {
				uni.previewImage({
					urls: imgs
				});
			},
			goBack() {
				uni.navigateBack();
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/sub_base/creative-detail/index?id=${id}`
				});
			},
			viewParticipants(item) {
				this.currentParticipants = item.designerList || [];
				this.showParticipantsModal = true;
			},
			closeModal() {
				this.showParticipantsModal = false;
				this.currentParticipants = [];
			},
			goToDesigner(designerId) {
				uni.navigateTo({
					url: `/pages/sub_base/designer-profile/index?id=${designerId}`
				});
			},
			formatDate(timeStr) {
				if (!timeStr) return '';
				const date = new Date(timeStr);
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${month}-${day}`;
			},
			async hotToggleLike(item) {
				try {
					if (item.liked) {
						await workLikeDel(item.id);
						item.likeNum = Math.max(0, (item.likeNum || 0) - 1);
					} else {
						await workLikeAdd(item.id);
						item.likeNum = (item.likeNum || 0) + 1;
					}
					item.liked = !item.liked;
				} catch (error) {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					});
					item.liked = !item.liked;
				}
			},
			async fetchMyWorks() {
				try {
					const res = await getMyWorkList();
					if (res.status === 200) {
						this.myCreativeItems = (res.data.list || []).map(item => ({
							...item,
							liked: false
						}));
					}
				} catch (error) {
					console.error('获取我的作品失败', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			async fetchHotRecommend() {
				try {
					const res = await getWorkList('', 1, 10, 0, 1);
					if (res.status === 200) {
						this.hotRecommendItems = (res.data.list || []).map(item => ({
							...item,
							levelImg: this.levelImg(item.work_level),
							liked: false
						}));
					}
				} catch (error) {
					console.error('获取热门推荐失败', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>


<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F2F8FC;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		/* height: 88rpx; */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		/* border-bottom: 2rpx solid #eeeeee; */
		z-index: 100;
	}

	.header-left,
	.header-right {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon,
	.add-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.handle-btn {
		width: 35%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.empty-tips {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 100rpx 0;
	}

	.content {
		height: calc(100vh - 88rpx);
	}

	/* Modal Styles */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		display: flex;
		align-items: flex-end;
	}

	.modal-content {
		background-color: #fff;
		width: 100%;
		max-height: 60vh;
		border-radius: 20rpx 20rpx 0 0;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.modal-header text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.close-btn {
		font-size: 48rpx;
		color: #999;
	}

	.modal-body {
		max-height: 400rpx;
		overflow-y: auto;
	}

	.modal-participant {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.modal-nickname {
		font-size: 28rpx;
		color: #333;
	}

	.empty-modal {
		text-align: center;
		color: #999;
		padding: 40rpx 0;
	}

	.creative-list {
		padding: 32rpx;
	}

	.creative-item {
		margin-bottom: 60rpx;
		position: relative;
	}

	.creative-group>.creative-item:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -32rpx;
		width: 100%;
		height: 2rpx;
		border-bottom: 2rpx solid #d4d4d4;
	}

	.user-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.avatar-vip-icon {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		background-color: #fff;
		box-sizing: border-box;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-details {
		display: flex;
		align-items: center;
	}

	.username {
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		margin-right: 16rpx;
	}

	.badge {
		font-size: 24rpx;
		color: #8BC0E4;
		background-color: #DCECF7;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.date-info {
		text-align: right;
	}

	.date {
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 8rpx;
		display: block;
	}

	.status {
		font-size: 20rpx;
		color: #999999;
	}

	.description {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.5;
		margin-bottom: 24rpx;
	}

	.image-scroll {
		width: 100%;
		white-space: nowrap;
		margin-bottom: 24rpx;
	}

	.image-container {
		display: flex;
	}

	.image-item {
		width: 200rpx;
		height: 200rpx;
		margin-right: 12rpx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.image {
		width: 100%;
		height: 100%;
	}

	.action-stats {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 16rpx;
		border-top: 2rpx solid #f5f5f5;
	}

	.participate-section {
		display: flex;
		align-items: center;
	}

	.participant-avatars {
		display: flex;
		margin-right: 16rpx;
	}

	.participant-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: -8rpx;
		border: 2rpx solid #ffffff;
	}

	.participate-text {
		font-size: 24rpx;
		color: #666666;
	}

	.stat-item {
		display: flex;
		align-items: center;
	}

	.stat-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.stat-text {
		font-size: 24rpx;
		color: #666666;
	}

	.section-title {
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
		text-align: center;
		margin: 48rpx 0 32rpx 0;
	}

	.identity-title {
		background-color: #E6F2F9;
		color: #84BDE3;
		padding: 2rpx 12rpx;
		border-radius: 12rpx;
		margin-left: 28rpx;
	}

	.mvp-img {
		height: 38rpx;
		/* width: 38rpx; */
		width: 138rpx;
		margin-left: 10rpx;
		margin-top: 6rpx;
	}
</style>